<template>
    <el-container>

        <el-header v-if="changeRow.length>0">
            <el-button type="primary" @click="updateAppShow">发布<i class="el-icon-s-promotion el-icon--right"></i></el-button>
            <el-button type="primary" @click="updateAppNotShow">不发布<i class="el-icon-delete el-icon--right"></i></el-button>
        </el-header>
        <el-header>
            <el-select @change="getAppList" v-model="tableData.type" placeholder="app类型">
                <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
            </el-select>
        </el-header>
        <el-main>
            <el-table v-loading="tableLoding" :data="tableData.data" style="width: 100%"
                @selection-change="handleSelectionChange"  border>
                <!-- <el-table-column type="selection" width="100" :selectable="selectable">
                </el-table-column> -->
                <el-table-column prop="appId"  type="selection" width="100">
                </el-table-column>
                <el-table-column prop="appId" label="apk编号" width="100">
                </el-table-column>
                <el-table-column prop="appName" label="apk名称">
                </el-table-column>
                <el-table-column prop="addTime" label="上传时间" sortable>
                </el-table-column>
                <el-table-column prop="show" label="是否发布" :formatter="showChangeData" sortable>
                </el-table-column>
                <el-table-column prop="type" label="app类型" :formatter="typeChangeData" sortable>
                </el-table-column>
            </el-table>
        </el-main>

        <el-footer>
            <div class="block">
                <el-pagination @size-change="changePageSize" @current-change="changeCurrentPage" @prev-click="prevPage"
                    @next-click="nextPage" :current-page="tableData.currentPage"
                    :page-sizes="[5, 10, 15, 20]" :page-size="tableData.pageSize"
                    layout="total, sizes, prev, pager, next, jumper" :total="tableData.total">
                </el-pagination>
            </div>
        </el-footer>
    </el-container>


</template>

<script>
    import {
        getAppListApi,
        updateAppShowApi,
        updateAppNotShowApi
    } from "@/api/upload";


    export default {
        data() {
            return {
                tableData: { //表格data
                    data: [],
                    currentPage: 1,
                    pageSize: 5,
                    total: 0,
                    type:0
                },
                tableLoding: false, //表格加载
                options: [{
                    value: 0,
                    label: '全部'
                },{
                    value: 1,
                    label: '林权登记平台'
                }, {
                    value: 2,
                    label: '农村不动产登记平台政府版'
                }, {
                    value: 3,
                    label: '农村不动产登记平台企业版'
                }],
                changeRow: []
            }
        },
        created: function () {
            this.getAppList()
        },
        methods: {
            //数据控制
            getAppList() {
                this.tableLoding = true
                getAppListApi(this.tableData).then(response => {
                    //console.log("== " + JSON.stringify(response.data.data.items))
                    this.tableData.data = response.data.data.items
                    this.tableData.total = response.data.data.total
                    this.tableLoding = false
                }).catch(error => {
                    this.$message({
                        showClose: true,
                        message: error,
                        type: 'error'
                    })
                    this.tableLoding = false
                })
            },
            changePageSize(val) {
                this.tableData.pageSize = val
                this.getAppList()
            },
            changeCurrentPage(val) {
                this.tableData.currentPage = val
                this.getAppList()
            },
            prevPage(val) {
                this.tableData.currentPage = val
                this.getAppList()
            },
            nextPage(val) {
                this.tableData.currentPage = val
                this.getAppList()
            },
            typeChangeData: function (row, column) {
                return row.type == '1' ? "林权登记平台" :
                    row.type == '2' ? "农村不动产登记平台政府版" :
                    row.type == '3' ? "农村不动产登记平台企业版" :
                    "未知"
            },
            showChangeData: function (row, column) {
                return row.show == '1' ? "已发布" :
                    row.show == '0' ? "未发布" :
                    "未知"
            },
            ///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
            handleSelectionChange(val) {
                this.changeRow = val
                
            },
            selectable(row, index) {
                if (row.show == 0) {
                    return false
                } else {
                    return true
                }
            },

            // 改为发布
            updateAppShow() {
                if (this.changeRow.length > 0) {
                    updateAppShowApi(this.changeRow).then(response => {
                        this.$message({
                            showClose: true,
                            message: "发布成功",
                            type: 'success'
                        })
                        this.getAppList()
                        this.tableLoding = false
                    }).catch(error => {
                        this.$message({
                            showClose: true,
                            message: error,
                            type: 'error'
                        })
                        this.tableLoding = false
                    })
                } else {
                    return;
                }
            },
            // 改为不发布
            updateAppNotShow() {
                if (this.changeRow.length > 0) {
                    updateAppNotShowApi(this.changeRow).then(response => {
                        this.$message({
                            showClose: true,
                            message: "修改成功",
                            type: 'success'
                        })
                        this.getAppList()
                        this.tableLoding = false
                    }).catch(error => {
                        this.$message({
                            showClose: true,
                            message: error,
                            type: 'error'
                        })
                        this.tableLoding = false
                    })
                } else {
                    return;
                }
            }
        }
    }
</script>

<style>
    .el-table--enable-row-hover .el-table__body tr:hover>td {
        background-color: #70b3ff87 !important;
    }
</style>